import { DemoBlock } from 'demos';
import { Button, Modal } from '@pxxtech/web';
import { sleep } from '@pxxtech/utils';
import { confirm } from '@pxxtech/web/src/modal/confirm';

const showModal = () => {
  Modal.show({
    title: '标题',
    children: (
      <>
        <Modal.Content>
          <div
            style={{
              height: '100px',
              backgroundColor: 'rgba(209, 23, 255, 0.2)',
            }}
          >
            内容
          </div>
        </Modal.Content>
        <Modal.Footer>
          <Button>取消</Button>
          <Button color="primary">确定</Button>
        </Modal.Footer>
      </>
    ),
  });
};
const showConfirm = () => {
  confirm({
    icon: 'success',
    closeOnAction: true,
    title:
      '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
    content:
      '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
    actions: [
      {
        children: '取消',
        onClick: () => {
          console.log('点击了取消');
        },
      },
      {
        color: 'primary',
        children: '确定',
        onClick: async () => {
          return sleep(3000);
        },
      },
    ],
  });
};
export default () => {
  return (
    <>
      <DemoBlock title="normal">
        <Button onClick={() => showModal()}>normal 对话框</Button>
      </DemoBlock>
      <DemoBlock title="confirm">
        <Button onClick={() => showConfirm()}>confirm 对话框</Button>
      </DemoBlock>
    </>
  );
};
